<template>
  <el-card>
    <div
      class="clearfix"
      slot="header"
    >
      <span>
        <i class="iconfont icon-icon-laba mt-5"></i>系统公告
      </span>
      <el-button
        @click="toDetail"
        icon="el-icon-info"
        style="float: right; padding: 3px 0"
        type="text"
      >查看</el-button>
    </div>
    <ul class="news">
      <li
        :key="item.title"
        @click="goToPath(item.path)"
        v-for="item in news"
      >
        <div>{{ item.title }}</div>
        <div>{{ item.indate }}</div>
      </li>
    </ul>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      news: [
        {
          title: "灵工服务声明",
          path: "news",
          indate: "2021/04/21",
        },
        {
          title: "系统升级通知",
          path: "news",
          indate: "2021/07/21",
        },
      ],
    };
  },
  methods: {
    goToPath() {
      this.$router.push("/sys_notice");
    },
    toDetail() {
      this.$router.push("/sys_notice");
    },
  },
};
</script>
<style lang="less" scoped>
.news {
  li {
    overflow: hidden;
    white-space: nowrap;
    line-height: 2.5rem;
    // padding: 0 1rem;
    //margin-bottom: 1em;
    margin: 0 0;
    cursor: pointer;
    text-overflow: ellipsis;
    // border-bottom: 1px solid #f1f2f4;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    &:hover {
      background-color: whitesmoke;
      color: #000;
    }
  }
}
</style>
